<template>
	<div id="app">
		<el-carousel :interval="3000" arrow="always" id="nav" v-if="path=='home'">
			<div class="nav-top">
				<a href="#" class="logo">
					<img src="./common/image/logo.png" alt="">
				</a>
				<div class="nav-r ">
					<div @click="toPath('home')" >
						<a to="/" :class="path=='home'?'btnColor':''">
							&nbsp;&nbsp;首页
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='home'">
						</a>
					</div>
					<div @click="toPath('about')">
						<a to="/about" :class="path=='about'?'btnColor':''">
							关于我们
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='about'">
						</a>
					</div>
					<div @click="toPath('addme')">
						<a to="/addme" :class="path=='addme'?'btnColor':''">
							加入我们
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='addme'">
						</a>
					</div>
					<div >
						<a href="http://m.slashworld.net/">
							钱包官网
						</a>
					</div>
				</div>
			</div>
		    <el-carousel-item v-for="(item,index) in navBgImageList" :key="index">
				<div id="nav" :style="{'background-image':'url(' + (item) + ') ','background-repeat':'no-repeat','background-size':'cover' }">
					<a class="toPayClass" href="http://m.slashworld.net/" v-if="index==1"></a>
					<div class="bgpic" v-if="path=='home'">
						<div class="home-top"  v-if="index==0">
							<div class="home-top-left">
								<div class="titleBig"> 欢迎来到斜杠大陆 </div>
								<div class="titlesmlle"> 币圈返利网你交易 我补贴 </div>
								<div class="downloadBox">
									<div class="downloadBtn">
										<img @mouseover="mouseoverPhone(require('@/common/image/androidQrcodeImg.png'))" class="androidImg" src="@/common/image/sy_android@1x.png" alt="">
										<img @mouseover="mouseoverPhone(require('@/common/image/IosQecodeImg.png'))" class="iosImg" src="@/common/image/sy_ios@1x.png" alt="">
									</div>
									<div class="downloadQrcode">
										<div class="downloadQrcodeBox">
											<img class="downloadQrcodeImg" :src="qrcodeImg"></img>
										</div>
									</div>
								</div>
							</div>
							<div class="home-top-right">
								<img src="@/common/image/phoneApp.png" alt="">
							</div>
						</div>
					</div>
				</div>
		    </el-carousel-item>
		  </el-carousel>
		<div id="nav" :style="{'background-image':'url(' + (navBgImage) + ') ','background-repeat':'no-repeat','background-size':'cover' }" v-else>
			<div class="nav-top">
				<a href="#" class="logo">
					<img src="./common/image/logo.png" alt="">
				</a>
				<div class="nav-r ">
					<div @click="toPath('home')" >
						<a to="/" :class="path=='home'?'btnColor':''">
							&nbsp;&nbsp;首页
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='home'">
						</a>
					</div>
					<div @click="toPath('about')">
						<a to="/about" :class="path=='about'?'btnColor':''">
							关于我们
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='about'">
						</a>
					</div>
					<div @click="toPath('addme')">
						<a to="/addme" :class="path=='addme'?'btnColor':''">
							加入我们
							<img src="@/common/image/breakLine.png" alt="" v-if="path=='addme'">
						</a>
					</div>
					<div >
						<a href="http://m.slashworld.net/">
							钱包官网
						</a>
					</div>
				</div>
			</div>
			<div class="bgpic"  v-if="path=='home'">
				<div class="home-top" >
					<div class="home-top-left">
						<div class="titleBig"> 欢迎来到斜杠大陆 </div>
						<div class="titlesmlle"> 币圈返利网你交易 我补贴 </div>
						<div class="downloadBox">
							<div class="downloadBtn">
								<img @mouseover="mouseoverPhone(require('@/common/image/androidQrcodeImg.png'))" class="androidImg" src="@/common/image/sy_android@1x.png" alt="">
								<img @mouseover="mouseoverPhone(require('@/common/image/IosQecodeImg.png'))" class="iosImg" src="@/common/image/sy_ios@1x.png" alt="">
							</div>
							<div class="downloadQrcode">
								<div class="downloadQrcodeBox">
									<img class="downloadQrcodeImg" :src="qrcodeImg"></img>
								</div>
							</div>
						</div>
					</div>
					<div class="home-top-right">
						<img src="@/common/image/phoneApp.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
	import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
	import gongyong from './components/gongyong'
	import zixun from './components/zixun'
	import reservation from './components/reservation'
	export default {
		data() {
			return {
				navBgImageList:[
					 require("@/common/image/sy_dh1@1x.png"),
					 require("@/common/image/sy_dh2@2x.png"),
				],
				qrcodeImg:require('@/common/image/androidQrcodeImg.png'),
				navBgImage: require("@/common/image/sy_dh1@1x.png"),
				path: "home"
			}
		},
		components: {
			gongyong,
			zixun,
			reservation,
			      Swiper,
      SwiperSlide
		},
		created() {
			var path = JSON.parse(sessionStorage.getItem('paths'))
			console.log(path)
			if(path){
				console.log(path)
				this.path = path
				if(path=='home'){
					this.navBgImage=require("@/common/image/sy_dh1@1x.png")
				}else if(path=='addme'){
					this.navBgImage=require("@/common/image/jrwm_dh1@1x.png")
				}else if(path=='about'){
					this.navBgImage = require("@/common/image/gywm_dh@1x.png")
				}
			}
		},
		methods: {
			mouseoverPhone(e){
				console.log(e)
				this.qrcodeImg = e
			},
			toPath(path) {
				this.path = path
				var navBgImage = ""
				if (path == 'home') {
					this.navBgImage = require("@/common/image/sy_dh1@1x.png")
					this.$router.push('/')
				}
				if (path == 'about') {
					this.navBgImage = require("@/common/image/gywm_dh@1x.png")
					this.$router.push('/about')
				}
				if (path == 'addme') {
					this.$router.push('/addme')
					this.navBgImage = require("@/common/image/jrwm_dh1@1x.png")
				}
				navBgImage=this.navBgImage
				sessionStorage.setItem('paths', JSON.stringify(path))
			},
		}
	}
</script>

<style lang="less">
	.toPayClass{
		display: inline-block;
		width: 100%;
		height: 680px;
		position: absolute;
		left: 0px;
		bottom:0px;
		cursor:pointer;
	}
	.downloadQrcode{
		.downloadQrcodeBox{
			margin-top: 30px;
			border-radius: 10px;
			width: 188px !important;
			height: 188px !important;
			background: red;
			background: url(./common/image/erweimabeijing.png);
			background-size: cover;
			border-radius: 20px ;
			img{
				border-radius: 20px ;
				width: 100%;
				height: 100%;
			}
		}
	}
	.downloadBox{
		width: 100%;
		display: flex;
		>div{ flex: 1; }
		.downloadBtn{
			padding-top: 40px;
			flex: 0.6;
			width: 100%;	
			>img{
				margin-top: 20px !important;
				cursor:pointer !important;
			}
			
		}
		
	}
	.androidImg:hover{
		content: url(./common/image/编组 17备份@1x.png);
	}
	.iosImg:hover{
		content: url(./common/image/sy_ios_xz@1x.png);
	}

	@keyframes caret {
	    50% { border-color: transparent; } 
	}
	@keyframes titTransparent {
				0% {
					opacity: 0.0;
				}
				10%{
					opacity: 0.1;
				}
				20%{
					opacity: 0.2;
				}
				30%{
					opacity: 0.3;
				}
				40%{
					opacity: 0.4;
				}
				50%{
					opacity: 0.5;
				}
				60%{
					opacity: 0.6;
				}
				70%{
					opacity: 0.7;
				}
				80%{
					opacity: 0.8;
				}
				90%{
					opacity: 0.9;
				}
				100%{
					opacity: 1;
				}
	}	
	.home-top {
		z-index: 99;
		width: 100%;
		padding: 0% 18.75%;
		height:680px !important;
		display: flex;
		padding-top: 100px;
		.home-top-left {
			flex: 1.2;
			width: 100%;
			height: 100%;
			.titleBig {
				font-size: 6vmin;
				font-weight: 800;
				color: #ffffff;
				animation: typing 2.8s steps(50), caret 0.5s steps(1) infinite;
			}
			.titlesmlle {
				font-size: 3vmin;
				font-weight: 500;
				color: #ffffff;
				animation: titTransparent steps(100) 2.8s, guodu steps(1) 1s infinite;
			}
		}
		.home-top-right {
			margin-bottom: -100px;
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			padding-right: 100px;
			>img {
				width: 410px;
				height: 529px;
				// margin-top: -100px ;
				animation: topDh 5s;
				-moz-animation: topDh 5s;	/* Firefox */
				-webkit-animation: topDh 5s;	/* Safari 和 Chrome */
				-o-animation: topDh 5s;
				animation-fill-mode:forwards;
			}
				@keyframes topDh {					0% {						margin-top: -300px;					}					100% {						margin-top: -100px;					}				}
		}
	}
	.btnColor{
		color: #34A5FF !important;
	}
	* {
		padding: 0;
		margin: 0;
		list-style: none;
		box-sizing: border-box;
	}
	html,
	body {
		width: 100%;
		height: 100%;
	}
	// 配置适应多端屏幕
	@media screen and (min-width: 1000px) {
	    #app {
	        width:100%;
	    }
	}
	#app {
		width: 100%;
		.el-carousel__item{
			height: 756px;
			width: 100%;
			.bgpic{
				padding-top:98px !important;
			}
		}
		.el-carousel__arrow{
			display: none;
		}
		.el-carousel__indicator{
			display: none;
		}
		.el-carousel__container{
			padding-top:98px !important;
			.nav-top{
				position: absolute;
				z-index: 9;
				top: 0;
				left: 0;
			}
			
		}
		#nav {
			width: 100%;
			background-size: cover;
			background-position: center;
			width: 100%;
			height: 756px;
			position: relative;
			
			.nav-top{
				// position: fixed;
				// top: 0;
				background-position: right;
				background-size: cover !important;
				border-radius: none;
				height: 98px;
				padding: 0px 18.75%;
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;
				.logo {
					flex: 1;
					padding-top: 10px;
					align-items: center;
				
					img {
						width: 150px;
					}
				}
				.nav-r {
					flex: 1;
					display: flex;
					justify-content:flex-end;
					>div{
						height: 100% !important;
						margin-left:10%;
						cursor:pointer;
						>div:first-child{
							margin-left: 0% !important;
						}	
						a{
							font-size: 22px;
							display: inline-block;
							display: flex;
							align-items: center;
							color: #FFFFFF;
							text-decoration:none;
							position: relative;
							height: 60px !important;
							img{
								display: block;
								position: absolute;
								bottom: -10%;
								left:10%;
								width: 64px;
							}
						}
					}
				}
			}
			.bgpic {
				// position: absolute;
				background-size: cover;
				background-position: center;
				// top: 0;
				// left: 0;
				width: 100%;
				height: 756px;
				// z-index: -1;
			}
		
		}
	}
</style>
